<template>
  <div class="page-container">
    <Position :menu-code="pageCode" :picture="menuInfo.picture" :name="menuInfo.name" class="position"></Position>
    <section class="page-content">
      <!-- 无子菜单时的默认内容 -->
      <div class="contact-container">
        <!-- 联系信息卡片区域 -->
        <div class="contact-cards-grid">
          <!-- 联系电话卡片 -->
          <div v-if="companyInfo.telephone" class="contact-card">
            <div class="card-icon">
              <Icon name="uil:phone" />
            </div>
            <div class="card-title">联系方式</div>
            <div class="card-content">{{ companyInfo.telephone }}</div>
            <NuxtLink :to="'tel:' + companyInfo.telephone" class="card-action"> 立即拨打 </NuxtLink>
          </div>

          <!-- 邮箱卡片 -->
          <div v-if="companyInfo.email" class="contact-card">
            <div class="card-icon">
              <Icon name="uil:at" />
            </div>
            <div class="card-title">邮箱地址</div>
            <div class="card-content">{{ companyInfo.email }}</div>
            <a :href="'mailto:' + companyInfo.email" class="card-action"> 发送邮件 </a>
          </div>

          <!-- 联系人卡片 -->
          <div v-if="companyInfo.contactPerson" class="contact-card">
            <div class="card-icon">
              <Icon name="uil:user" />
            </div>
            <div class="card-title">联系人</div>
            <div class="card-content">{{ companyInfo.contactPerson }}</div>
          </div>

          <!-- 微信二维码卡片 - 高亮显示 -->
          <div v-if="companyInfo.wechatQrCodeUrl" class="contact-card wechat-card">
            <div class="card-icon">
              <Icon name="uil:comment-message" />
            </div>
            <div class="card-title">微信咨询</div>
            <div class="qr-code-wrapper">
              <img :src="companyInfo.wechatQrCodeUrl" alt="微信二维码" class="qr-code" />
            </div>
            <div class="card-subtitle">扫码添加销售顾问</div>
          </div>
        </div>

        <!-- 公司描述 -->
        <div v-if="companyInfo.companyDescription" class="company-description">
          <div class="description-header">
            <div class="description-icon">
              <Icon name="uil:building" />
            </div>
            <h3 class="description-title">关于我们</h3>
          </div>
          <div class="description-content">
            <p>{{ companyInfo.companyDescription }}</p>
          </div>
        </div>
      </div>
      <ContactForm></ContactForm>
    </section>
  </div>
</template>

<script setup lang="ts">
import { getListDetailAll } from "@/api/projects";
import { mockProjectPage } from "@/assets/mock";
import Position from "~/components/Position.vue";
import ContactForm from "~/components/ContactForm.vue";
const props = defineProps({
  pageType: {
    type: String,
    default: "page"
  },
  basePageCode: {
    type: String,
    default: ""
  }
});

/**
 * 动态页面代码，根据当前分类参数切换
 * @returns 当前页面代码
 */
const pageCode = computed(() => {
  // 如果currentCategory为空，返回基础pageCode
  if (!currentCagegory.value) {
    return props.basePageCode;
  }

  // 根据currentCategory查找对应的子菜单code
  const currentChild = getCurrentChildMenu.value;
  if (currentChild && currentChild.code) {
    return currentChild.code;
  }

  // 如果找不到对应的子菜单，返回基础pageCode
  return props.basePageCode;
});
const pageData = ref<any>(null);
const menuInfo = ref<any>({});
const route = useRoute();
const appConfig = useAppConfig();
const { menus, siteInfo, companyInfo } = appConfig.systemConfig;
console.log("all:", route.params.all); // array

/**
 * 获取当前分类参数
 * @returns 当前分类字符串
 */
const currentCagegory = computed(() => {
  if (route.params.all && Array.isArray(route.params.all) && route.params.all.length > 0) {
    return route.params.all[0] as string;
  }
  return "";
});

/**
 * 判断tab是否为当前激活状态
 * @param link - tab的链接地址
 * @returns 是否激活
 */
const isActiveTab = (link: string): boolean => {
  if (!currentCagegory.value) return false;
  return link.includes(currentCagegory.value);
};

/**
 * 格式化日期显示
 * @param dateString - 日期字符串
 * @returns 格式化后的日期字符串
 */
const formatDate = (dateString: string): string => {
  if (!dateString) return "";
  const date = new Date(dateString);
  return date.toLocaleDateString("zh-CN", {
    year: "numeric",
    month: "2-digit",
    day: "2-digit"
  });
};

/**
 * 获取当前激活的子菜单信息
 * @returns 当前激活的子菜单对象或默认第一个子菜单
 */
const getCurrentChildMenu = computed(() => {
  if (!menuInfo.value.children || menuInfo.value.children.length === 0) {
    return null;
  }

  // 如果有currentCategory，查找对应的子菜单
  if (currentCagegory.value) {
    const foundChild = menuInfo.value.children.find((child: any) => child.link.includes(currentCagegory.value));
    if (foundChild) {
      return foundChild;
    }
  }

  // 默认返回第一个子菜单
  return menuInfo.value.children[0];
});

/**
 * 根据当前激活的子菜单过滤页面数据
 * @returns 过滤后的页面数据数组
 */
const filteredPageData = computed(() => {
  if (!pageData.value || !Array.isArray(pageData.value)) {
    return [];
  }

  const currentChild = getCurrentChildMenu.value;
  if (!currentChild || !currentChild.code) {
    return pageData.value;
  }

  return pageData.value.filter((item: any) => item.categoryId === currentChild.code);
});

/**
 * 根据code在menus数组中递归查找菜单信息
 * @param menuList - 菜单列表数组
 * @param targetCode - 目标菜单代码
 * @returns 找到的菜单信息或null
 */
function findMenuByCode(menuList: any[], targetCode: string): any | null {
  for (const menu of menuList) {
    if (menu.code === targetCode) {
      return menu;
    }

    if (menu.children && menu.children.length > 0) {
      const result = findMenuByCode(menu.children, targetCode);
      if (result) {
        return result;
      }
    }
  }
  return null;
}

/**
 * 根据pageCode获取menus中对应的菜单信息
 * @param code - 菜单代码
 * @returns 菜单信息或null
 */
function getMenuDetailByCode(code: string): any | null {
  return findMenuByCode(menus, code);
}
/**
 * 初始化页面数据
 */
const initPage = async () => {
  try {
    if (!props.pageType.includes("$")) {
      // 获取当前菜单信息
      const menuInfoRes = getMenuDetailByCode(props.basePageCode);
      console.log(menuInfoRes, "menuInfoRes");
      if (menuInfoRes) {
        menuInfo.value = menuInfoRes;
        useHead({
          title: menuInfoRes.name,
          meta: [
            { name: "keywords", content: menuInfoRes.keywords },
            { name: "description", content: menuInfoRes.description }
          ]
        });
        // 获取页面绑定的数据
        if (menuInfoRes.modelId) {
          const res = await getListDetailAll({ moduleId: menuInfoRes.modelId });
          pageData.value = res.rows;
          console.log(pageData.value, "页面数据");
        }
      } else {
        console.warn("未找到当前页面的菜单信息");
      }
    } else {
      pageData.value = mockProjectPage;
    }
  } catch (error) {
    console.error("获取产品详情失败:", error);
  } finally {
    console.log("页面初始化完毕");
  }
};

// 初始化页面
initPage();

/**
 * pageData 的数据结构说明, pageData 是个输入，使用： pageData[index].author
 * @typedef {Object} PageData
 * @property {string} author - 作者信息
 * @property {string} categoryId - 分类ID
 * @property {string} categoryName - 分类名称
 * @property {string} content - 页面内容
 * @property {string} createdAt - 创建时间
 * @property {string} description - 页面描述
 * @property {boolean} isPublished - 是否已发布
 * @property {boolean} isRecommend - 是否推荐
 * @property {boolean} isRelatedRecommend - 是否相关推荐
 * @property {Array<string>} mainImages - 主图片数组
 * @property {string} modelId - 关联模型ID
 * @property {string} modelName - 模型名称
 * @property {string} modelType - 模型类型
 * @property {Array} parameterList - 参数列表
 * @property {Array} parameters - 参数数组
 * @property {string} seoDesc - SEO描述
 * @property {string} seoKey - SEO关键词
 * @property {string} subtitle - 副标题
 * @property {Array<string>} tags - 标签数组
 * @property {Array<string>} thumbnailImages - 缩略图数组
 * @property {string} title - 页面标题
 * @property {string} updatedAt - 更新时间
 * @property {number} viewCount - 访问量
 */

/**
 * menuInfo 的数据结构说明
 * @typedef {Object} MenuInfo
 * @property {Array} children - 子菜单数组
 * @property {number} clickable - 是否可点击 (1: 可点击, 0: 不可点击)
 * @property {string} code - 菜单唯一标识码
 * @property {string} createdAt - 创建时间
 * @property {string} description - 菜单描述信息
 * @property {string} detailTplId - 详情模板ID
 * @property {string} detailTplName - 详情模板名称
 * @property {string} icon - 菜单图标URL
 * @property {number} isOutLink - 是否外部链接 (1: 是, 0: 否)
 * @property {string} keywords - SEO关键词
 * @property {string} link - 菜单链接地址
 * @property {string} listTplId - 列表模板ID
 * @property {string} listTplName - 列表模板名称
 * @property {string} modelId - 关联模型ID
 * @property {string} modelName - 模型名称
 * @property {string} modelType - 模型类型
 * @property {string} name - 菜单显示名称
 * @property {string} outLink - 外部链接地址
 * @property {string} parentCode - 父级菜单代码
 * @property {string} parentLink - 父级菜单链接
 * @property {string} parentName - 父级菜单名称
 * @property {string} picture - 菜单图片URL
 * @property {number} sort - 排序值
 * @property {number} status - 状态 (1: 启用, 0: 禁用)
 * @property {string} title - 菜单标题
 */
</script>

<style scoped lang="scss">
.page-content {
  max-width: 1400px;
  margin: 0 auto;
  padding: 20px 0;
}

.tab-container {
  margin-top: 20px;
  border-bottom: 1px solid #e5e5e5;
}

.tab-header {
  display: flex;
  gap: 0;
  justify-content: center;
}

.tab-item {
  padding: 12px 24px;
  text-decoration: none;
  color: #666;
  border-bottom: 2px solid transparent;
  transition: all 0.3s ease;
  font-weight: 500;

  &:hover {
    color: #1890ff;
    background-color: #f5f5f5;
  }

  &.active {
    color: #1890ff;
    border-bottom-color: #1890ff;
    background-color: #fff;
  }
}

.tab-content {
  padding: 30px 0;
}

.content-list {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.content-item {
  background: #fff;
  border-radius: 8px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: box-shadow 0.3s ease;

  &:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  }
}

.item-header {
  margin-bottom: 16px;

  .item-title {
    font-size: 20px;
    font-weight: 600;
    color: #333;
    margin: 0 0 8px 0;
    line-height: 1.4;
  }

  .item-meta {
    display: flex;
    gap: 16px;
    font-size: 14px;
    color: #666;

    .author,
    .date,
    .category {
      position: relative;

      &:not(:last-child)::after {
        content: "|";
        margin-left: 8px;
        color: #ddd;
      }
    }
  }
}

// 默认内容样式
.default-content {
  padding: 20px 0;
}

.contact-container {
  max-width: 1200px;
  margin: 0 auto 20px;
  padding: 0 20px;

  @media screen and (max-width: 768px) {
    padding: 0 16px;
  }
}

.company-header {
  text-align: center;
  margin-bottom: 48px;
  padding-bottom: 32px;
  border-bottom: 1px solid #f0f0f0;

  @media screen and (max-width: 768px) {
    margin-bottom: 32px;
    padding-bottom: 24px;
  }

  .logo-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;

    @media screen and (min-width: 768px) {
      flex-direction: row;
      justify-content: center;
      gap: 20px;
    }

    .company-logo {
      width: 80px;
      height: 80px;
      object-fit: contain;
      border-radius: 8px;

      @media screen and (min-width: 768px) {
        width: 60px;
        height: 60px;
      }
    }

    .company-title {
      h2 {
        font-size: 28px;
        font-weight: 700;
        color: #1a1a1a;
        margin: 0;
        line-height: 1.2;

        @media screen and (max-width: 768px) {
          font-size: 24px;
        }
      }
    }
  }
}

// 联系信息卡片网格布局
.contact-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  margin-bottom: 48px;

  @media screen and (max-width: 640px) {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-bottom: 32px;
  }

  @media screen and (min-width: 1024px) {
    grid-template-columns: repeat(4, 1fr);
    gap: 32px;
  }
}

// 联系信息卡片样式
.contact-card {
  background: white;
  border-radius: 16px;
  padding: 32px 24px;
  text-align: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(0, 0, 0, 0.06);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;

  &:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  }

  @media screen and (max-width: 768px) {
    padding: 24px 20px;
  }

  .card-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 16px;
    background: linear-gradient(135deg, $custom-primary, $custom-secondary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 24px;

    @media screen and (max-width: 768px) {
      width: 48px;
      height: 48px;
      font-size: 20px;
      margin-bottom: 12px;
    }
  }

  .card-title {
    font-size: 18px;
    font-weight: 600;
    color: #333;
    margin-bottom: 12px;
    line-height: 1.3;

    @media screen and (max-width: 768px) {
      font-size: 16px;
      margin-bottom: 8px;
    }
  }

  .card-content {
    font-size: 16px;
    color: #666;
    margin-bottom: 16px;
    line-height: 1.5;
    word-break: break-all;

    @media screen and (max-width: 768px) {
      font-size: 14px;
      margin-bottom: 12px;
    }
  }

  .card-action {
    display: inline-block;
    padding: 8px 16px;
    background: $custom-primary;
    color: white;
    text-decoration: none;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.3s ease;

    &:hover {
      background: $custom-primary;
      transform: scale(1.05);
    }

    @media screen and (max-width: 768px) {
      padding: 6px 12px;
      font-size: 13px;
    }
  }
}

// 微信卡片特殊样式 - 高亮显示
.wechat-card {
  background: linear-gradient(135deg, #07c160, #38d9a9);
  color: white;
  border: 2px solid #07c160;
  position: relative;

  &::before {
    content: "";
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, #07c160, #38d9a9, #07c160);
    border-radius: 18px;
    z-index: -1;
    animation: borderGlow 2s ease-in-out infinite alternate;
  }

  @keyframes borderGlow {
    0% {
      box-shadow: 0 0 20px rgba(7, 193, 96, 0.3);
    }
    100% {
      box-shadow: 0 0 30px rgba(7, 193, 96, 0.6);
    }
  }

  .card-icon {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px);
  }

  .card-title {
    color: white;
    font-weight: 700;
  }

  .qr-code-wrapper {
    margin: 16px 0;
    display: flex;
    justify-content: center;

    .qr-code {
      width: 120px;
      height: 120px;
      object-fit: contain;
      border-radius: 12px;
      background: white;
      padding: 8px;
      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);

      @media screen and (max-width: 768px) {
        width: 100px;
        height: 100px;
        padding: 6px;
      }
    }
  }

  .card-subtitle {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 500;
    margin-top: 8px;

    @media screen and (max-width: 768px) {
      font-size: 13px;
    }
  }

  &:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 32px rgba(7, 193, 96, 0.3);
  }
}

// 公司描述样式
.company-description {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border-radius: 16px;
  padding: 32px;
  margin-top: 32px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  position: relative;
  overflow: hidden;

  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, $custom-primary, $custom-secondary);
  }

  @media screen and (max-width: 768px) {
    padding: 24px 20px;
    margin-top: 24px;
  }

  .description-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 20px;

    @media screen and (max-width: 640px) {
      flex-direction: column;
      gap: 8px;
      margin-bottom: 16px;
    }

    .description-icon {
      width: 48px;
      height: 48px;
      background: linear-gradient(135deg, $custom-primary, $custom-secondary);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-size: 20px;
      box-shadow: 0 4px 12px rgba($custom-primary, 0.3);

      @media screen and (max-width: 640px) {
        width: 40px;
        height: 40px;
        font-size: 18px;
      }
    }

    .description-title {
      font-size: 24px;
      font-weight: 700;
      color: #1a1a1a;
      margin: 0;
      letter-spacing: 0.5px;

      @media screen and (max-width: 768px) {
        font-size: 20px;
      }

      @media screen and (max-width: 640px) {
        font-size: 18px;
        text-align: center;
      }
    }
  }

  .description-content {
    position: relative;

    p {
      font-size: 16px;
      color: #555;
      line-height: 1.8;
      margin: 0;
      text-align: justify;
      text-indent: 2em;
      letter-spacing: 0.3px;

      @media screen and (max-width: 768px) {
        font-size: 15px;
        line-height: 1.7;
        text-align: left;
      }

      @media screen and (max-width: 640px) {
        font-size: 14px;
        text-indent: 1.5em;
      }
    }
  }
}
</style>
